<template>
  <div>
    <TheTable
      ref="tableRef"
      :data="allList"
      :page.sync="page"
      :showPage="showPage"
      @changeSize="changeSize"
      @changePage="changePage"
      @selectData="selectData"
    >
      <div
        v-for="(item, index) in columns"
        :key="index"
        class="item"
        effect="dark"
        placement="top-start"
      >
        
        <el-table-column
          fixed="left"
          type="selection"
          v-if="index === 0"
          effect="dark"
          placement="top-start"
          class="item"
        >
        </el-table-column>
        <el-table-column type="expand" v-if="index === 0" >
          <template slot-scope="props">
            <el-form label-position="right" inline class="demo-table-expand">
              <el-form-item class="title">
                <span>原辅料供应商管理明细</span>
              </el-form-item>
              <br />
              <el-form-item label="供应商名称:">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="供应商名称简称:">
                <span>{{ props.row.abbreviation  }}</span>
              </el-form-item>
              <el-form-item label="公司地址:">
                <span>{{ props.row.address  }}</span>
              </el-form-item>
              <el-form-item label="工商注册号 :">
                <span>{{ props.row.businessNumber  }}</span>
              </el-form-item>
              <el-form-item label="商务部备案编码:" >
                <span>{{ props.row.commerceMinistry }}</span>
              </el-form-item>
              <el-form-item label="联系方式:">
                <span>{{ props.row.contactWay  }}</span>
              </el-form-item>
              <el-form-item label="联系人:">
                <span>{{ props.row.contacts  }}</span>
              </el-form-item>
              <el-form-item label="加工厂id:">
                <span>{{ props.row.factoryId  }}</span>
              </el-form-item>
              <el-form-item label="法人代表:">
                <span>{{ props.row.legalPerson  }}</span>
              </el-form-item>
              <el-form-item label="经营类别:">
                <span>{{ props.row.manageType }}</span>
              </el-form-item>
              <el-form-item label="经营者性质:">
                <span>{{ props.row.operatorNature   }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          :label="item.name"
          v-if="item.show"
          :prop="item.prop"
          show-overflow-tooltip
        ></el-table-column>
      </div>
      
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            class="el-icon-edit"
            v-auth="'processing_material_access_update'"
            @click="editEvent(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            size="mini"
            class="el-icon-delete"
            v-auth="'processing_material_access_delete'"
            @click="removeMaterial(scope.row.sku)"
          ></el-button>
        </template>
      </el-table-column>
    </TheTable>

    <!-- 表单开始 -->
    <FormInfo 
      v-show="dialogVisible"
      @close="closeEvent"
      :dialogVisible="dialogVisible"
      @closeDialog="closeDialog"
      :dialogTitle="dialogTitle"
      :addInfo="editObject"
      :message="message"
      :manageList="manageList"
      :operatorList="operatorList"
    />
    <!-- 表单结束 -->
  </div>
</template>

<script>
import TheTable from "../../common/TheTable.vue"
import FormInfo from './FormInfo.vue';
import {
  getInfoBypage,
  addInfo,
  editInfo,
  delInfo,
  detialInfo
} from '../../../Api/processingplant/process_supplier'
export default {
  components: {
    TheTable,
    FormInfo,
  },
  props: {
    // 表头数据
    columns: {
      Array,
    },
    judge:{
      Boolean
    },
    search_data:{
      Object
    },
    //经营类型
    manageList:{
      Array
    },
    //经营者性质
    operatorList:{
      Array
    },
  },

  data() {
    return {
      // 表格数据
      allList: [],
      //表单名称
      dialogTitle: "",
      //按钮名称
      message:'',
      //修改供应商信息传入对象
      editObject: {},
     
      //具体信息
      materialInfo: {},
      //是否显示表单
      dialogVisible: false,
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      showPage: true, // 显示分页
    };
  },
  computed: {},
  created() {
    this.setAllList();
  },
  watch:{
    judge:function(){
      this.setAllList()
    }
  },
  mounted(){
    
  },
  methods: {
    //删除选中的原辅料数据
    selectData(list){
      this.$emit("selectData",list)
    },
    //获取数据
    async setAllList() {
      const { data: res } = await getInfoBypage(
        this.page.current,
        this.page.pageSize,
      );
      console.log("请求到的列表",res)
      if (res.statusCode !== 20000) {
        this.$message.error("查询供应商数据失败");
      } else {
        if (res.data === null) {
          return this.$message.warning("搜索范围内无数据");
        }
        this.allList = res.data.records;
        this.page.total = parseInt(res.data.total);
        console.log(this.data)
      }
    },
    //通过时间范围、sku、进厂类型分页查看原料进口登记信息
    async getList(){
      const {data:res} = await getInfoBypage(
        this.page.current,
        this.page.pageSize,
        this.search_data
      );
       console.log("hhhhh----",res)
    },

    //修改原辅料库存信息
    async editMaterInfo() {
      console.log(this.editObject);
      const { data: res } = await editInfo(this.editObject);
      console.log(res);
      if (res.statusCode === 20000) {
        this.setAllList();
        this.$message.success("修改供应商信息成功");
        this.dialogVisible = false;
      }
    },
    //打开面板
    editEvent(row) {
      this.dialogTitle='修改供应商信息'
      this.editObject = row;
      this.dialogVisible = true;
      this.message = '立即修改'
    },
    
    //选择入库类型
    changeEvent(index) {
      // console.log(index);
      this.editObject.enterType = this.TypeList[index].enterType;
    },
    //关闭表单
    closeEvent() {
      this.setAllList();
    },
    closeDialog(){
      this.dialogVisible = false
    },
    //删除信息
    async removeMaterial(sku) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该原辅料信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      // console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await delInfo(sku);
      // console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("删除成功");
        this.setAllList();
      }
    },
    //查看明细
    async lookMaterialInfo() {
      console.log(this.materialInfo);
      const { data: res } = await detailInfo(this.materialInfo);
      console.log(res);
      if (res.statusCode === 20000) {
        this.setAllList();
        this.dialogVisible = false;
        this.materialInfo = {};
        this.refresh();
      }
    },
    changePage(page) {
      this.page.current = page.current;
      this.setAllList();
    },
    // 分页 改变每页显示的条数
    changeSize(size) {
      console.log(size);
      this.page.pageSize = size.pageSize;
      this.setAllList();
    },
  },
};
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand .title span{
    width: 100%;
    height: 40px;
    font-size: 18px;
  }
  .demo-table-expand label {
    width: 90px;
    color: #d0e0f7;
  }
  .demo-table-expand .el-form-item {
    margin-left: 50px;
    margin-bottom: 0;
    width: 40%;
  }
   
</style>